<template>
    <div class="content">
        <div class="top">
            <el-select id="white_common_regions" v-model="homeStatus" clearable placeholder="入住状态">
                <el-option
                        v-for="item in statusList"
                        :key="item.value"
                        :label="item.text"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-input id="white_platform_name" v-model="unitName" placeholder="单元名称"></el-input>
            <el-input id="white_jt_product_nbr" v-model="buildNum" placeholder="幢号"></el-input>
            <el-input id="white_jt_product_num" v-model="homeNum" placeholder="房号"></el-input>
            <el-input id="white_jt_product_name" v-model="homeName" placeholder="住客姓名"></el-input>

            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
<!--            <el-button id="white_list_add" type="success" icon="el-icon-plus" @click="add">录入</el-button>-->
            <el-button id="white_list_export" type="success" icon="el-icon-upload2" @click="outExcel">批量导出</el-button>
            <el-button id="white_list_del" type="danger" icon="el-icon-delete" @click="del">批量删除</el-button>
        </div>
        <div class="list">
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    border
                    stripe
                    align="center"
                    tooltip-effect="dark"
                    :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d','border-color':'#dfe6ec'}"
                    style="width: 100%;font-size: 14px;color: #1f2d3d"
                    v-loading="loading"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        align="center"
                        width="60">
                </el-table-column>
                <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        width="110">
                </el-table-column>
                <el-table-column
                        prop="unitname"
                        label="单元名称"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="buildnum"
                        label="幢号"
                        :formatter="buildFormatter"
                        align="center"
                        width="170"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="storeynum"
                        label="楼层号"
                        :formatter="storeyFormatter"
                        width="180"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="homenum"
                        label="房号"
                        :formatter="homeFormatter"
                        width="220"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="homename"
                        label="住客姓名"
                        :formatter="userFormatter"
                        width="220"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="homestatus"
                        label="状态"
                        :formatter="typeFormatter"
                        width="160"
                        align="center">
                </el-table-column>
                <el-table-column prop=""
                                 label="操作"
                                 width="160"
                                 align="center">
                    <template slot-scope="scope">
                        <div style="display: flex;margin-left:-10px">
                            <el-button :plain="true"
                                       :id="'white_list_handle_edit' + scope.$index"
                                       size="mini"
                                       style="color: #62a8ea;background-color: #fff;font-size: 12px"
                                       @click="edit(scope.row)"
                                       >编辑</el-button>
                            <el-button :plain="true"
                                       :id="'white_list_handle_expire' + scope.$index"
                                       size="mini"
                                       style="font-size: 12px;color: black;background-color: #fff"
                                       @click="deleteData(scope.row, scope.$index)"
                                       type="danger">删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange"
                               layout="total, sizes,prev, pager, next"
                               :current-page.sync="iPagination.current"
                               :page-size='iPagination.pageSize'
                               :page-sizes="iPagination.pageSizeOptions"
                               :total="iPagination.total"
                               background
                               @size-change="handleSizeChange">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
    import { export2Excel } from '@/utils/util'
    export default {
        name: "index",
        data(){
            return{
                columns:[{title:'序号',key:'index'},{title:'单元名称',key:'unitname'},
                    {title:'幢号',key:'buildnum'},{title:'楼层号',key:'storeynum'},{title:'房号',key:'homenum'},
                    {title:'住客姓名',key:'homename'},{title:'状态',key:'homestatus'}],
                homeStatus: '',
                unitName: '',
                buildNum: '',
                homeNum: '',
                homeName: '',
                tableData: [],
                userData: [],
                multipleSelection:[],
                statusList: [
                    {
                        text: '已入住',
                        value: 1
                    },
                    {
                        text: '未入住',
                        value: 2
                    }
                    ],
                iPagination: {
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: [7, 10, 20, 50],
                    total: 0,
                    "page": 0,
                    "pageSize": 10,
                },
                conditions: {
                    pageNo: 1,
                    pageSize: 10,
                    // StatementName: "categoryMgrDAO.selectCatalogItemHistoryBystaffNumber"
                },
                loading:false,
                // type:'',
                // id: '',
                // h_id: ''
            }
        },
        created(){
            // this.$axiosToken({
            //     url: '/users/getUserByToken',
            //     method: 'get',
            //     data: {},
            //     success:(result=>{
            //         this.type = result.type
            //         this.u_id = result.id
            //         console.log(this.u_id,777)
            //     })
            // });
        },
        mounted(){
            this.gethomeData();
            // this.getUserData()
        },
        methods:{
            // 分页导航
            handleCurrentChange (val) {
                this.iPagination.current = val;
                this.search()
            },
            handleSizeChange (val) {
                this.iPagination.current = 1;
                this.iPagination.pageSize = val;
                this.search()
            },
            // 获取列表
            gethomeData(){
                this.loading = true;
                this.$Axios({
                    url: '/house/gethouseList',
                    method: 'get',
                    data:{
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.tableData = result.data;
                        this.iPagination.total = result.total;
                        // this.loading = false
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                        console.log(this.tableData,444)
                    }
                })
            },
            // getUserData(){
            //     this.$axiosToken({
            //         url: '/users/getMyId',
            //         method: 'post',
            //         data: {
            //             id: this.u_id
            //         },
            //         success:(result=>{
            //             this.h_id = result[0].h_id;
            //             this.loading = true;
            //             this.$Axios({
            //                 url: '/house/getHouseData',
            //                 method: 'get',
            //                 data:{
            //                     id: this.h_id,
            //                     currPage: 0,
            //                     pageNum: 1,
            //                 },
            //                 success:(result)=>{
            //                     this.userData = result.data;
            //                     this.iPagination.total = result.total;
            //                     // this.loading = false
            //                     setTimeout(() => {
            //                         this.loading = false;
            //                     }, 200);
            //                     console.log(this.userData,444)
            //                 }
            //             })
            //             console.log(this.h_id,999)
            //         })
            //     })
            //
            // },
            // 获取搜索参数
            getParams(){
                let data = {
                    homestatus: this.homeStatus,
                    unitname: this.unitName,
                    buildnum: this.buildNum,
                    homenum: this.homeNum,
                    homename: this.homeName,
                    currPage: this.iPagination.current - 1,
                    pageNum: this.iPagination.pageSize,
                };
                return data
            },
            // 查询
            search(){
                this.loading = true;
                // let data = this.getParams()
                this.$axiosToken({
                    url: '/house/searchnumList',
                    method: 'get',
                    data:this.getParams(),
                    success: (result)=>{
                        this.tableData = result.data;
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection, 222)
            },
            // 批量导出
            outExcel(){
                if (this.multipleSelection.length != 0) {
                    this.$confirm('确定导出excel文件？', '提示', {
                        type: 'warning'
                    }).then(()=>{
                        export2Excel(this.columns,this.multipleSelection)
                    }).catch(()=>{
                        this.$message({
                            type: 'info',
                            message: '已取消批量导出房号信息',
                            duration: 2000
                        })
                    })
                }else {
                    this.$alert('请选择要导出的房号信息', '提示', {
                        confirmButtonText: '确定'
                    })
                }

            },
            // 批量删除
            del(){
                if (this.multipleSelection.length != 0){
                    this.$confirm('确定删除该房号信息？','提示',{
                        type: 'warning'
                    }).then(()=>{
                        let ids = [];
                        for (let i = 0; i < this.multipleSelection.length; i++) {
                            ids.push(this.multipleSelection[i].id)
                        }
                        this.$axiosToken({
                            url: '/house/delnumList',
                            method: 'get',
                            data:{ids:ids},
                            success: (result) =>{
                                this.$message({
                                    showClose: true,
                                    message: '房号信息删除成功',
                                    type: 'success'
                                });
                                this.gethomeData()
                            }
                        }).catch((reason)=>{
                            alert('删除失败'+reason)
                        })
                    })
                }else {
                    this.$alert('请选择要删除的房号信息', '提示', {
                        confirmButtonText: '确定'
                    })
                }
            },
            // 编辑
            edit(row){
                this.$router.push({
                    name: 'numAdd',
                    query:{
                        type: 'DETAIL',
                        editId: row.id
                    }
                })
            },
            // 删除
            deleteData(row, index) {
                this.$confirm('确定删除该单元信息？', '提示', {
                    type: 'warning',
                }).then(()=>{
                    const id = row.id;
                    this.$axiosToken({
                        url: '/house/delunitList',
                        method: 'get',
                        data:{id},
                        success: (result) =>{
                            this.$message({
                                showClose: true,
                                message: '删除房号信息成功',
                                type: 'success'
                            });
                            this.getunitList()
                        }
                    }).catch((reason)=>{
                        alert('删除失败'+reason)
                    })
                })
            },
            typeFormatter(row,column){
                const homestatus = row.homestatus
                if (homestatus == 1){
                    return '已入住'
                }else {
                    return '未入住'
                }
            },

            buildFormatter(row,column){
                if (row.buildnum == undefined){
                    return '暂无'
                }else {
                    return row.buildnum
                }
            },
            storeyFormatter(row,column){
                if (row.storeynum == undefined){
                    return '暂无'
                }else {
                    return row.storeynum
                }
            },
            homeFormatter(row,column){
                if (row.homenum == undefined){
                    return '暂无'
                }else {
                    return row.homenum
                }
            },
            userFormatter(row,column){
                if (row.homename == undefined){
                    return '暂无'
                }else {
                    return row.homename
                }
            },

        }
    }
</script>

<style scoped>
    .top {
        width: 100%;
        display: flex;
    }
    /deep/ .el-input__inner{
        font-size: 14px;
        height: 36px;
    }
    .el-input {
        width: 15%;
        margin-left: 10px;
        border-radius: 4px;
    }

    .el-button {
        margin-left: 13px;
        color: #fff;
        font-size: 14px;
    }

    .list {
        margin-top: 30px;
    }
    .pagination{
        text-align: right;
        margin: 20px 0;
    }
    /deep/ .el-input.el-input--mini.el-input--suffix>.el-input__inner{
        height: 28px;
    }
</style>